// component/navbar/index.js

const app = getApp();
const stysem = app.globalData.stysem;

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: ''
    },
    // 标题水平对齐方式 非必填 默认值 iOS center Android left 允许值 left center
    textalian: {
      type: String,
      value: ''
    },
    // 标题字体颜色 非必填 默认值 #000 
    textColor: {
      type: String,
      value: '#000'
    },
    // 标题字号
    textSize: {
      type: Number,
      value: 16
    },
    // 导航栏背景色 非必填
    background: {
      type: String,
      value: ''
    },
    // 通知栏背景色 非必填
    noticeColor: {
      type: String,
      value: ''
    },
    // 自定义胶囊菜单返回按钮 非必填 默认值 false 允许值  true 显示 false 隐藏
    back: {
      type: Boolean,
      value: false
    },
    // 自定义胶囊菜单首页返回按钮 非必填 默认值 false 允许值  true 显示 false 隐藏
    home: {
      type: Boolean,
      value: false
    },
    // 导航栏字体颜色 非必填 默认值 #000000 允许值 #ffffff #000000
    navFontColor: {
      type: String,
      value: '#000000'
    },
    // 是否开启动态更改 导航栏背景色 字体颜色
    isDyColor: {
      type: Boolean,
      value: false
    },
    // 标题 样式
    titleObject: {
      type: Object,
      value: {
        text: '',
        size: 16,
        color: '#000000',
      }
    },
    // 导航栏
    navigation: {
      type: Object,
      value: {
        color: '#000000',
        background: ''
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    boxStyle: '',
    titleStyle: '',
    isStyle: '',
    warpStyle: '',
    noticeStyle: '',
    mainStyle: '',
    btnStyle: '',
    menuBg: '',
    backBg: '',
    homeBg: '',
    dyBg: '',
    dyTitColor: '',
  },
  /**
   * 监听器
   */
  observers: {
    'navFontColor': function(val) {

    },
    'textColor': function(val){

    },
    'background': function(val,oldval){
      this.dynamicColor()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 设置样式
    setStyle(life) {
      const {
        statusBarHeight,
        navBarHeight,
        capsulePosition,
        navBarExtendHeight,
        ios,
        windowWidth,
        gap
      } = app.globalData.stysem;
      const {back, home, title, noticeColor,navFontColor, isDyColor} = this.data;
      const rightDistance = windowWidth - capsulePosition.right; // 胶囊按钮右侧到屏幕右侧的边距
      const leftWidth = windowWidth - capsulePosition.left; // 胶囊按钮左侧到屏幕右侧的边距
      
      const warpStyle = [
        `height: ${navBarHeight + navBarExtendHeight}px`,
      ].join(';'); // 组件外容器样式
      const isStyle = [`height: ${capsulePosition.height / 2}px`,].join(';'); // 组件胶囊菜单间隔线样式
      const mainStyle = [
        `height: ${capsulePosition.height + (gap * 2)}px`,
        `padding-top: ${gap}px`,
        `padding-right: ${leftWidth}px`,
        `padding-left: ${rightDistance}px`,
        `padding-bottom: ${gap}px`,
      ].join(';'); // 导航栏主体
      const btnStyle = [`width: ${capsulePosition.width / 2}px`].join(';');

      let navigationbarinnerStyle = []; // 组件内容器容器样式
      let noticeStyle = [`height: ${statusBarHeight}px`]; // 通知栏
      
      let navTitHeight = [
        `height: ${capsulePosition.height}px`,
        `line-height: ${capsulePosition.height}px`,
        `text-align: ${ios ? 'center' : 'left'}`,
      ].join(';'); // 组件标题样式
      let navBarLeft = []; // 自定义胶囊菜单样式
      let menuBg = ''; // 胶囊 背景
      let menuBackBg = ''; // 胶囊 返回 背景
      let menuHomeBg = ''; // 胶囊 首页 背景
      if ((back && !home) || (!back && home)) {
        navBarLeft = [
          `width: auto`,
          `height: ${capsulePosition.height}px`,
          `border-radius: ${capsulePosition.height / 2}px`,
        ].join(';');
      } else if (back && home) {
        navBarLeft = [
          `width: ${capsulePosition.width}px`,
          `height: ${capsulePosition.height}px`,
          `border-radius: ${capsulePosition.height / 2}px`,
        ].join(';');
      } else {
        navBarLeft = [
          'width: auto',
          `border-radius: ${capsulePosition.height / 2}px`,
        ].join(';');
      }
      // 判断是否存在自定义通知栏背景色
      if (noticeColor) {
        noticeStyle.push(`background: ${noticeColor}`);
      }
      // 确定 开启
      if (isDyColor) {
        navigationbarinnerStyle = [
          `height: ${navBarHeight + navBarExtendHeight}px`,
          `top: ${0}px`,
          `left: ${0}px`,
          `color: ${this.data.color ? this.data.color : '#000'}`,
        ].join(';');
      } else {
        navigationbarinnerStyle = [
          `height: ${navBarHeight + navBarExtendHeight}px`,
          `top: ${0}px`,
          `left: ${0}px`,
          `color: ${this.data.color ? this.data.color : '#000'}`,
          `background: ${this.data.background ? this.data.background : '#fff'}`,
        ].join(';');
      }
      noticeStyle = noticeStyle.join(';');
      if (navFontColor === 'white') {
        menuBg = 'menu-black';
        menuBackBg = 'back-white';
        menuHomeBg = 'home-white';
      } else if (navFontColor === 'black') {
        menuBg = 'menu-white';
        menuBackBg = 'back-black';
        menuHomeBg = 'home-black';
      }
      console.log(navigationbarinnerStyle)
      console.log(navTitHeight)
      console.log(navBarLeft)
      
      this.setData({
        boxStyle: navigationbarinnerStyle,
        titleStyle: navTitHeight,
        navBarLeft: navBarLeft,
        isStyle: isStyle,
        warpStyle: warpStyle,
        mainStyle: mainStyle,
        noticeStyle: noticeStyle,
        btnStyle: btnStyle,
        menuBg: menuBg,
        backBg: menuBackBg,
        homeBg: menuHomeBg
      })
    },
    // 动态改变 背景色 字体颜色
    dynamicColor() {
      this.setData({
        dyTitColor: `;color: ${this.data.textColor}`,
        dyBg: `;background: ${this.data.background}`,
      })
      if (this.data.navFontColor) {
        // wx.setNavigationBarColor({
        //   frontColor: this.data.navFontColor,
        //   backgroundColor: '#ffffff'
        // })
      }
    },
    // 返回事件
    back() {
      this.triggerEvent('back', {delta: this.data.delta})
    },
    search() {
      this.triggerEvent('search', {})
    },
     // 胶囊信息4种任一属性为0返回true
    checkRect(rect) {
      return !rect.width || !rect.top || !rect.left || !rect.height;
    },
    // 获取胶囊菜单信息
    getMenuButtonBoundingClientRect(systemInfo) {
      const ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
      let rect;
      try {
        rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
        if (rect === null) {
          throw new Error('getMenuButtonBoundingClientRect error')
        }
        // 取值为0的情况  有可能width不为0 top为0的情况
        if (this.checkRect(rect)) {
          throw new Error('getMenuButtonBoundingClientRect error')
        }
      } catch (error) {
        let gap = ''; // 胶囊按钮上下间距 使导航内容居中
        let width = 96; // 胶囊的宽度
        if (systemInfo.platform === 'android') {
          gap = 8;
          width = 96;
        } else if (systemInfo.platform === 'devtools') {
          if (ios) {
            gap = 5.5; // 开发工具中ios手机
          } else {
            gap = 7.5; // 开发工具中android和其他手机
          }
        } else {
          gap = 4;
          width = 88;
        }
        if (!systemInfo.statusBarHeight) {
          // 开启wifi的情况下修复statusBarHeight值获取不到
          systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20
        }
        rect = {
          // 获取不到胶囊信息就自定义重置一个
          bottom: systemInfo.statusBarHeight + gap + 32,
          height: 32,
          left: systemInfo.windowWidth - width - 10,
          right: systemInfo.windowWidth - 10,
          top: systemInfo.statusBarHeight + gap,
          width
        };
      }
      return rect;
    },
    // 获取系统基本信息
    getSystemInfo() {
      if (app.globalData.stysem && !app.globalData.stysem.ios) {
        return app.globalSystemInfo;
      } else {
        const systemInfo = wx.getSystemInfoSync(); // 获取系统信息
        const ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
        const rect = this.getMenuButtonBoundingClientRect(systemInfo);

        let navBarHeight = '';
        // 通知栏高度未获取到
        if (!systemInfo.statusBarHeight) {
          let gap = rect.top - systemInfo.statusBarHeight;
          systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
          navBarHeight = (function () {
            return (2 * gap) + rect.height;
          }());
          systemInfo.gap = gap; // 胶囊按钮上下间距
          systemInfo.statusBarHeight = 0;
          systemInfo.navBarExtendHeight = 0; // 下方扩展4像素高度 防止下方边距太小
        } else { // 通知栏高度获取到
          let gap = rect.top - systemInfo.statusBarHeight;
          navBarHeight = (function () {
            return systemInfo.statusBarHeight + (2 * gap) + rect.height;
          }())

          if (ios) {
            systemInfo.navBarExtendHeight = 4; // 下方扩展4像素高度 防止下方边距太小
          } else {
            systemInfo.navBarExtendHeight = 0;
          }
          systemInfo.gap = gap; // 胶囊按钮上下间距
        }
        systemInfo.navBarHeight = navBarHeight; // 导航栏高度不包括statusBarHeight
        systemInfo.capsulePosition = rect;
        systemInfo.ios = ios; // 是否ios

        app.globalData.stysem = systemInfo; // 将信息保存到全局变量中,后边再用就不用重新异步获取了

        console.log('systemInfo', systemInfo);
        return systemInfo;
      }
    }
  },
   /**
   * 组件生命周期 实例刚刚被创建时执行
   */
  created() {
    this.getSystemInfo()
  },
  /**
   * 组件生命周期 实例进入页面节点树执行
   */
  attached() {
    this.setStyle() // 设置样式
  },
  /**
   * 组件生命周期 组件布局完成后执行
   */
  ready() {

  },
  /**
   * 组件生命周期 被移动到另一个节点时执行
   */
  moved() {

  },
  /**
   * 组件生命周期 实例从页面节点树移除时执行
   */
  detached() {

  },

})
